import VirtualScroll from '../../components/VirtualScroll';
import { Tabs } from 'antd';
import style from './index.module.scss';

// 虚拟滚动例子
const VirtualScrollDemo = () => {
    const list = new Array(100000).fill(1).map((item, index) => index);

    const children1 = (
        <VirtualScroll
            height={60}
            list={list}
            renderItem={
                (item, index, height) => (
                    <div className={style.item} key={index} style={{ height: height }}>
                        {item} 这是一个虚拟滚动列表, 每一项高度固定的
                    </div>
                )
            }
            style={{ height: '100%' }}
        />
    );

    const heights = list.map(() => Math.floor(Math.random() * 100) + 30); // 随机生成高度
    const children2 = (
        <VirtualScroll
            height={heights}
            list={list}
            renderItem={
                (item, index, height) => (
                    <div className={style.item} key={index} style={{ height: height }}>
                        {item} 这是一个虚拟滚动列表, 每一项高度不固定的
                    </div>
                )
            }
            style={{ height: '100%' }}
        />
    );
    return (
        <div className='h-full bg-fff p-20 d-flex flex-column'>
            <h3 className='m-b-20'>虚拟滚动</h3>
            <Tabs
                className='d-flex flex-1'
                defaultActiveKey="1"
                items={[
                    {
                        key: '1',
                        label: `子元素高度统一`,
                        children: children1,
                    },
                    {
                        key: '2',
                        label: `子元素高度不统一`,
                        children: children2,
                    },
                ]}
                style={{ height: 0 }}
            />
        </div>
    );
};

export default VirtualScrollDemo;
